<!DOCTYPE html>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<html lang="zh-CN">
<head>
    <meta name="viewport" content="width=device-width,inital-scale=1,maximum-scale=1,user-scalable=no">
    <title></title>
</head>

<link rel="stylesheet" href="static/css/bootstrapv3.css">
<link rel="stylesheet" href="static/css/qunit-1.11.0.css"/>
<link rel="stylesheet" type="text/css" href="static/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="static/css/bootstrap.min.css">

<script type="text/javascript" src="static/js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="static/js/bootstrapv3.js"></script>
<script type="text/javascript" src="static/js/bootstrap-paginator.js"></script>
<body >
<nav class="navbar navbar-default navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">购物网站</a>
        </div>
        <div id="navbar" class="collapse navbar-collapse">
            <ul class="nav navbar-nav navbar-right">
              <li>
                <div class="nav navbar-nav navbar-right" id="logined">
                    <ul class="nav navbar-nav navbar-right">
                        <li class="active"><a href="#" id="user_suc_name">张小龙</a></li>
                        <li><a href="#">购物车</a></li>
                    </ul>
                </div>
               </li>
                <li>
                   <div class="nav navbar-nav navbar-right" id="login">
                       <ul class="nav navbar-nav navbar-right">
                       <li>
                           <input type="text" id="username_input" class="form-control" placeholder="账号" style="margin-top: 10px">
                       </li>
                       <li>
                           <input type="password" id="password_input" class="form-control" placeholder="密码" style="margin-top: 10px ; margin-right: 10px">
                       </li>
                       <li>
                           <button type="btn btn-info"  id="login_btn" style="margin-top: 10px;margin-right: 10px">登陆</button>
                       </li>
                       <li>
                           <button type="btn btn-info" id="register_btn" style="margin-top: 10px;margin-right: 10px">注册</button>
                       </li>
                       </ul>
                   </div>
               </li>
            </ul>
        </div><!-- /.nav-collapse -->
    </div><!-- /.container -->

</nav>
<div class="container">

    <div class="row row-offcanvas row-offcanvas-right">
        <div class="row">
            <div class="col-xs-6 col-sm-3 sidebar-offcanvas" id="sidebar">
                <div class="list-group" id="tyle_list">
                    <a href="#" class="list-group-item active">Link</a>
                    <a href="#" class="list-group-item">Link</a>
                    <a href="#" class="list-group-item">Link</a>
                    <a href="#" class="list-group-item">Link</a>
                    <a href="#" class="list-group-item">Link</a>
                    <a href="#" class="list-group-item">Link</a>
                    <a href="#" class="list-group-item">Link</a>
                    <a href="#" class="list-group-item">Link</a>
                    <a href="#" class="list-group-item">Link</a>
                    <a href="#" class="list-group-item">Link</a>
                </div>
            </div><!--/.sidebar-offcanvas-->
            <div class="col-xs-6 col-sm-9">
                <p class="pull-right visible-xs">
                    <button type="button" class="btn btn-primary btn-xs" data-toggle="offcanvas">Toggle nav</button>
                </p>
                <div class="jumbotron">
                    <h1>个人购物网站</h1>

                    <p>这是一个购物网站，目前正在完善中..............</p>


                </div>
                <p>

                <div class="input-group">
                    <input type="text" class="form-control" placeholder="iPhone.">
      <span class="input-group-btn">
        <button class="btn btn-default" type="button">搜索</button>
      </span>
                </div>
                <!-- /input-group -->
                </p>
            </div>
            <!--/.col-xs-12.col-sm-9-->
        </div>

        <div class="container-fluid" id ="show_goods">
        <div class="row">

            <div class="col-xs-6 col-lg-4">
                <p><img src="static/img/1.png" class="img-responsive" alt="Responsive image"></p>
                <h2>Heading</h2>
                <p><a class="btn btn-default" href="#" role="button">buy</a></p>
            </div><!--/.col-xs-6.col-lg-4-->
            <div class="col-xs-6 col-lg-4">
                <p><img src="static/img/1.png" class="img-responsive" alt="Responsive image"></p>
                <h2>Heading</h2>
                <p><a class="btn btn-default" href="#" role="button">buy</a></p>
            </div><!--/.col-xs-6.col-lg-4-->
            <div class="col-xs-6 col-lg-4">
                <p><img src="static/img/1.png" class="img-responsive" alt="Responsive image"></p>
                <h2>Heading</h2>
                <p><a class="btn btn-default" href="#" role="button">buy</a></p>
            </div><!--/.col-xs-6.col-lg-4-->
            <div class="col-xs-6 col-lg-4">
                <p><img src="static/img/1.png" class="img-responsive" alt="Responsive image"></p>
                <h2>Heading</h2>
                <p><a class="btn btn-default" href="#" role="button">buy</a></p>
            </div><!--/.col-xs-6.col-lg-4-->
            <div class="col-xs-6 col-lg-4">
                <p><img src="static/img/1.png" class="img-responsive" alt="Responsive image"></p>
                <h2>Heading</h2>
                <p><a class="btn btn-default" href="#" role="button">buy</a></p>
            </div><!--/.col-xs-6.col-lg-4-->

        </div><!--/row-->
        </div>
        <div class="center-block">
            <div class="row">

                <nav>
                    <ul class="pagination pagination-lg"  id="pagination">
                        <li>
                            <a href="#" aria-label="Previous">
                                <span aria-hidden="true">&laquo;</span>
                            </a>
                        </li>
                        <li><a href="#">1</a></li>
                        <li><a href="#">2</a></li>
                        <li><a href="#">3</a></li>
                        <li><a href="#">4</a></li>
                        <li><a href="#">5</a></li>
                        <li>
                            <a href="#" aria-label="Next">
                                <span aria-hidden="true">&raquo;</span>
                            </a>
                        </li>
                    </ul>
                </nav>
            </div>
        </div>
        <hr>

        <footer>
            <p>&copy;lxy  2014</p>
        </footer>

    </div><!--/.container-->
</body>


<!--js-->

<script type="text/javascript">
    function test(id){

        if($("#user_suc_name").val() != null && $("#user_suc_name").val() != ""){
            alert(id+" "+ $("#user_suc_name").val());
            $.ajax({
                contentType : "application/json",
                url: "addorder",
                data: {"userid":$("#user_suc_name").val(),"goods_id":id},
                success: function (msg) {
                    alert("已经放到购物车");
                },
                error:function(msg){
                    alert("失败");
                }
            });
        }else{
            alert("请登录");
        }
    }


    $(function() {

        alert(document.cookie);
        if (document.cookie.length > 0) {
            $("#login").hide();
            $("#logined").show();
            $("#user_suc_name").val(document.cookie.split(";")[1].split("=")[1]);
            $("#user_suc_name").text(document.cookie.split(";")[0].split("=")[1]);

        } else {
        $("#login").show();
        $("#logined").hide();
    }
    var element = $('#pagination');
        function queryWithOutRefresh(msg){
            $("#show_goods").html("");

            var showstr ="<div class='row' >";
            $(eval(msg)).each(function(i,item){
                showstr += "<div class='col-xs-6 col-lg-4' style='height: 400px'>";
                showstr += "<p><img class ='img-responsive' src='"+ item.img_url +"' ></p>";
                showstr += "<h3>"+ item.name +"</h3>";
                showstr += "<h2>"+ item.price +"</h2>";
                showstr += "<p><a onclick='test("+item.id +")' class ='btn btn-default' role='button'>buy</a></p>";
                showstr += "</div>";

            });

            showstr += "</div>";
            $("#show_goods").append(showstr);


        }

        $.ajax({
            contentType : "application/json",
            url: "goods_query",
            data: {"page":1},
            success: function (msg) {
                queryWithOutRefresh(msg);
            },
            error:function(msg){
                alert("失败");
            }
        });

   var options = {
        size:"large",
        bootstrapMajorVersion:3,
        currentPage: 1,
        numberOfPages: 6,
        totalPages:${page},
        onPageClicked: function (event, originalEvent, type, page) {
            $.ajax({
                contentType : "application/json",
                url: "goods_query",
                data: {"page":page},
                success: function (msg) {
                    queryWithOutRefresh(msg);

                },
                error:function(msg){
                    alert("失败");
                }
            });
        }
    };
    element.bootstrapPaginator(options);

        $.ajax({
            contentType : "application/json",
            url: "type_query",
            success: function (msg) {
                $("#tyle_list").html("");
                $(eval(msg)).each(function(i,item){

                    var hh = "<a href='#' id='tets' class='list-group-item'>"+item+"</a>";
                    $("#tyle_list").append(hh);
                });
            },
            error:function(msg){
                alert("失败");
            }
        });


    $("#tyle_list").on("click", 'a', function(e){
            $.ajax({
                contentType : "application/json",
                url: "goods_type_query",
                data:{"typename":encodeURI($(e.target).html())},
                success: function (msg) {
                    queryWithOutRefresh(msg);
                },
                error:function(msg){
                    alert("失败");
                }
            });

        });

//        var username = document.cookie.split(";")[0].split("=")[1];
//        if (username.length > 0) {
//            $("#login").hide();
//            $("#logined").show();
//        } else {
//            $("#login").show();
//            $("#logined").hide();
//        }

    });


    $("#login_btn").click(function(e){

        $.ajax({
            contentType : "application/json",
            url: "login",
            data:{"username":encodeURI($("#username_input").val()),"password":encodeURI($("#password_input").val())},
            success: function (msg) {
                $(eval(msg)).each(function(i,item) {

                    $("#login").hide();
                    $("#logined").show();
                    $("#user_suc_name").text(item.nickname);

                    alert(item.nickname);
                    window.document.cookie = "name" +"="+item.nickname;
                    window.document.cookie = "id" +"="+$("#username_input").val();

//                    $("#user_suc_name").val(item.id);
//                    document.cookie = "loginname"＋ item.nickname;

                });


            },
            error:function(msg){
                alert("账户或者密码错误");
            }
        });
    });

</script>

</html>